<template>
  <!-- vx提现-->
  <div class="withdrawal" @click="withdrawalClick">
    <!-- <p>提现人:{{ withdrawalName }}</p> -->
    <p>
      <!-- {{ username }} -->
      <span @click="tuichuClick">[切换登录]</span>
    </p>
    <div class="withdrawal_select">
      <input
        @blur="cardBlur"
        @click.stop="choiceCardClick"
        type="text"
        placeholder="请选择银行卡号(须与实名认证一致)"
        v-model="cardinfo"
      />
      <input type="text" placeholder="输入提现数量" v-model="num" />
      <div>
        可提现<span>￥{{ money }}</span
        >积分
      </div>
      <ul v-show="bankListShow">
        <li
          v-for="(item, index) in bankList"
          :key="index"
          @click.stop="choiceokClick(index)"
        >
          {{ item.cardNum }}&nbsp;&nbsp;&nbsp;{{ item.bankName }}
        </li>
        <li @click.stop="addCardClick">添加银行卡号</li>
      </ul>
    </div>
    <!-- <p>
      提现规则:
      <br />1、单笔提现需满100元 <br />2、提现金额为50元的整数倍
      <br />3、提现为1个工作日
    </p> -->
    <div class="withdrawal_btn" @click="okwithdrawalClick">立即提现</div>
    <div
      class="withdrawal_addCard"
      v-show="addCardShow"
      @click.stop="withdrawal_addCardClick"
    >
      <p>添加银行卡</p>
      <input type="text" placeholder="开户人真实姓名" v-model="addName" />
      <input type="text" placeholder="银行卡号" v-model="addCard" />
      <div @click.stop="okAddCardClick">添加银行卡号</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import "../../assets/jquery-3.4.1.js";
import "../../assets/jquery-3.4.1.min.js";
import md5 from "js-md5";
import qs from "qs";
export default {
  data() {
    return {
      balance: 0,
      token: "",
      userId: "",
      openId: "",
      cardinfo: "",
      card: "",
      bankName: "",
      num: "",
      username: "",
      money: "当前可提现0元",
      withdrawalName: "",
      bankList: "",
      bankListShow: false,
      addCardShow: false,
      addName: "",
      addCard: "",
    };
  },
  created() {
    // let openId = this.getCookie("openId");
    // console.log(openId);
    // if (!!openId||openId=="undefined") {
    //   //有openId
    //   this.openId = openId;
    this.$store.commit("empty");
    let token = this.getCookie("token");
    if (!token) {
      this.$store.commit("change", "/withdrawal");
      // setTimeout(()=>{
      // this.$router.push("/login");
      // },200)
      // console.log(this.$store.state.pathName);
      this.$router.push("/login");
    }
    let userId = this.getCookie("userId");
    this.userId = userId;
    this.token = token;
    this.getBalance();
    // } else {
    //   //没有openId
    //   let url = location.href;
    //   let codetest = RegExp(/code/);
    //   console.log(url, codetest.test(url));
    //   if (codetest.test(url)) {
    //     //地址中有code值
    //     let codeStr = url.split("?")[1].split("&")[0].split("=")[1];
    //     this.getOpenID(codeStr);
    //   } else {
    //     //地址中没有code值
    //     this.getCode();
    //   }
    // }
  },
  methods: {
    withdrawalClick() {
      this.bankListShow = false;
      this.addCardShow = false;
    },
    withdrawal_addCardClick() {},
    choiceCardClick() {
      //选择银行卡
      this.bankListShow = true;
    },
    choiceokClick(index) {
      //改变银行卡
      this.cardinfo =
        this.bankList[index].cardNum + "   " + this.bankList[index].bankName;
      this.card = this.bankList[index].cardNum;
      this.bankName = this.bankList[index].bankName;
      this.bankListShow = false;
    },
    addCardClick() {
      //添加银行卡
      this.bankListShow = false;
      // this.addCardShow = true;
      this.$router.push("/withdrawal_push");
    },
    okAddCardClick() {
      //添加成功银行卡
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        this.userId +
        "&token=" +
        this.token +
        "&time=" +
        timestamp +
        "&name=" +
        this.addName +
        "&cardNum=" +
        this.addCard +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: this.userId,
        name: this.addName,
        time: timestamp,
        cardNum: this.addCard,
        token: this.token,
        sign: md5(_token),
      };
      if (this.addName && this.addCard) {
        this.$axios
          .post("/user/addBankCard", qs.stringify(params))
          .then((res) => {
            console.log(res.data);
            Toast(res.data.text);
            this.getBalance();
            this.addCardShow = false;
            this.addName = "";
            this.addCard = "";
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        Toast("不能为空");
      }
    },
    getBalance() {
      //获取余额
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        this.userId +
        "&token=" +
        this.token +
        "&time=" +
        timestamp +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: this.userId,
        token: this.token,
        time: timestamp,
        sign: md5(_token),
      };
      //获取可提现金额实名信息
      this.$axios
        .post("/user/withdrawText", qs.stringify(params))
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 0) {
            this.balance = res.data.result.balance;
            this.withdrawalName = res.data.result.name;
            this.money = res.data.result.balance;
            this.num = "";
          } else if (res.data.status != 2) {
            Toast(res.data.text);
            this.money = "当前可提现0元";
            this.num = "";
          }
        })
        .catch((err) => {
          console.log(err);
        });
      //获取银行卡列表
      this.$axios
        .post("/user/card_list", qs.stringify(params))
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 0) {
            this.bankList = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      //获取用户信息
      this.$axios
        .post("/user/userInfo", qs.stringify(params))
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 0) {
            this.username = res.data.result.user.nickname;
          } else {
            // location.reload();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onCopy(e) {
      Toast("复制成功");
    },
    onError(e) {
      Toast("复制失败");
    },
    tuichuClick() {
      document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
      document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
      document.cookie = "openId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
      this.userId = "";
      this.token = "";
      this.username = "";
      this.$store.commit("change", "/withdrawal");
      this.$router.push("/login");
    },
    setCookie(cname, cvalue, exdays) {
      let date = new Date();
      date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000);
      let expires = "expires=" + date.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    },
    getCode() {
      let codeUrl = "";
      let url = encodeURIComponent(
        "http://h5.paipaixingqiu.com/h5/#/withdrawal"
      );
      codeUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd35b45f47cc708a7&redirect_uri=" +
        url +
        "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
      location.href = codeUrl;
    },
    getOpenID(code) {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      this.$axios
        .post("/index/getOpenId", qs.stringify({ code: code, tiem: timestamp }))
        .then((res) => {
          console.log(res);
          this.openId = res.data.result.openid;
          this.setCookie("openId", res.data.result.openid, 180);
          let token = this.getCookie("token");
          if (token) {
            let userId = this.getCookie("userId");
            this.userId = userId;
            this.token = token;
            this.getZuan();
          } else {
            this.$store.commit("change", "/withdrawal");
            this.$router.push("/login");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    cardBlur() {},
    okwithdrawalClick() {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        this.userId +
        "&token=" +
        this.token +
        "&time=" +
        timestamp +
        "&num=" +
        this.num +
        "&bankName=" +
        this.bankName +
        "&account=" +
        this.card +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: this.userId,
        account: this.card,
        num: this.num,
        time: timestamp,
        bankName: this.bankName,
        token: this.token,
        sign: md5(_token),
      };
      if (this.num % 10 != 0 || this.num < 100) {
        Toast("您输入的金额不符合提现规则");
      } else {
        if (this.num > this.balance) {
          Toast("您的可提现金额不足");
          this.num = "";
        } else {
          this.$axios
            .post("/user/postWithdraw", qs.stringify(params))
            .then((res) => {
              console.log(res.data);
              Toast(res.data.text);
              if (res.data.status == 0) {
                this.cardinfo = "";
                this.num = "";
                setTimeout(() => {
                  this.getBalance();
                }, 1000);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    },
  },
};
</script>
<style>
.withdrawal {
  width: 100vw;
  overflow: hidden;
  background: rgba(249, 249, 249, 1);
  position: relative;
  height: 100vh;
}
.withdrawal > p {
  width: 88vw;
  margin-left: 6vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-size: 3.6vw;
  margin-top: 5vw;
}
.withdrawal > p:nth-of-type(2) {
  position: absolute;
  text-align: right;
  width: 100vw;
  top: 0;
  font-size: 3vw;
  margin-left: 0;
}
.withdrawal > p:nth-of-type(2) > span {
  margin: 0 5vw;
}
.withdrawal > p:nth-of-type(3) {
  line-height: 7vw;
}
.withdrawal_select {
  position: relative;
}
.withdrawal_select > input {
  width: 92vw;
  margin-left: 4vw;
  height: 12.8vw;
  padding: 0 4.8vw;
  box-sizing: border-box;
  margin-top: 5vw;
  background: rgba(235, 235, 235, 1);
  border: none;
  border-radius: 6.4vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-size: 3.4vw;
}
.withdrawal_select > div {
  margin-top: 2.7vw;
  margin-left: 4vw;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
.withdrawal_select > div span {
  color: #ffaa00;
}
.withdrawal_select > ul {
  width: 87.4vw;
  position: absolute;
  left: 6.3vw;
  background: rgba(163, 163, 163, 1);
  overflow: hidden;
  top: 18vw;
  border-radius: 2.8vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  font-size: 3.6vw;
}
.withdrawal_select > ul > li {
  width: 80.6vw;
  margin-left: 3.4vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.29);
  height: 9.7vw;
  line-height: 9.7vw;
}
.withdrawal_select > ul > li:nth-last-child(1) {
  border-bottom: none;
}
.withdrawal_select > ul > img {
  position: absolute;
  top: 0;
  left: 2vw;
  margin-top: -3vw;
}
.withdrawal_btn {
  width: 83.5vw;
  margin-left: 8.25vw;
  height: 13.3vw;
  line-height: 13.3vw;
  background: linear-gradient(90deg, #fea16a 0%, #fe6206 100%);
  border-radius: 6.55vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  font-size: 5vw;
  text-align: center;
  margin-top: 14.4vw;
}
.withdrawal_addCard {
  position: absolute;
  width: 80vw;
  height: 65vw;
  top: 40vw;
  border-radius: 2.4vw;
  left: 10vw;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.07);
}
.withdrawal_addCard > p {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  font-size: 3.9vw;
  text-align: center;
  line-height: 13vw;
  margin-bottom: 3vw;
}
.withdrawal_addCard > input {
  padding: 0 4.6vw;
  width: 58vw;
  margin-left: 6.4vw;
  border: none;
  height: 9.7vw;
  line-height: 9.7vw;
  background: rgba(249, 249, 249, 1);
  border-radius: 4.85vw;
  margin-bottom: 5.3vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 3.2vw;
}
.withdrawal_addCard > div {
  width: 30.9vw;
  margin-left: 24.55vw;
  height: 9.7vw;
  line-height: 9.7vw;
  text-align: center;
  
background: linear-gradient(90deg, #FEA16A 0%, #FE6206 100%);
  border-radius: 4.85vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  font-size: 3.4vw;
  margin-top: 2.2vw;
}
</style>